概述
本节完成购物车页面的底部结算栏，并解决页面整体布局中内容区域未撑满导致底部定位异常的问题。核心内容涵盖 position: absolute 与文档流的关系，以及使用 Flex 嵌套布局实现全屏高度撑满。
1. 底部结算栏
1.1 结构
底部结算栏包含全选复选框、已选数量、总价和结算按钮：
<div class="absolute bottom-0 left-0 w-full bg-white shadow-lg z-10">
<div class="container flex items-center justify-between py-4">
<!-- 左侧：全选 -->
<div class="flex items-center gap-2">
<input type="checkbox" v-model="selectAll" />
<span>全选</span>
</div>
<!-- 右侧：合计 + 结算 -->
<div class="flex items-center gap-4">
<span>合计：<strong class="text-sky-500 text-lg">{{ totalPrice }}</strong></span>
<button class="btn btn-primary">结算({{ selectedCount }})</button>
</div>
</div>
</div>
vue
1.2 关键样式
| 属性 | 作用 |
|---|---|
absolute bottom-0 left-0 w-full | 固定在容器底部，宽度撑满 |
bg-white | 白色背景，区别于列表区域 |
shadow-lg | 阴影效果，与列表区分隔 |
z-10 | 层级提升，覆盖列表内容 |
2. 布局问题与解决
2.1 问题描述
底部结算栏使用 position: absolute 定位，脱离了正常文档流。导致两个问题：
- 列表内容被遮挡：底部结算栏覆盖了列表的最后几条数据
- 底部位置异常：当中间内容区域高度不足时，结算栏悬浮在页面中间
2.2 解决方案：padding-bottom 补偿
为列表容器添加 padding-bottom，为底部结算栏预留空间：
<!-- 购物车外层容器 -->
<div class="relative bg-gray-100">
<!-- 列表区域：底部留出结算栏的空间 -->
<div class="pb-20">
<ul>
<!-- 购物车条目 -->
</ul>
</div>
<!-- 底部结算栏 -->
<div class="absolute bottom-0 ...">
<!-- 全选、结算 -->
</div>
</div>
vue
原理：pb-20（padding-bottom: 5rem）在列表底部创建空白区域，由于 absolute 元素不占据文档流空间，这个 padding 正好补偿了结算栏的高度。
2.3 内容区域撑满
问题：中间内容区域高度不足时，整个页面看起来"矮了一截"，底部结算栏位置不正确。
解决方案：使用 Flex 嵌套布局，确保内容区域从顶部一直延伸到底部。
3. Flex 嵌套布局实现全屏高度
3.1 三层结构
从外到内需要三层 Flex 嵌套：
default.vue (全局 Layout)
└── study.vue (模块基础组件)
└── cart.vue (购物车页面)
text
3.2 第一层：全局 Layout
<!-- layouts/default.vue -->
<template>
<div class="flex flex-col min-h-screen">
<NavBar />
<div class="flex-1">
<RouterView />
</div>
<Footer />
</div>
</template>
vue
min-h-screen（min-height: 100vh）：最小高度占满整个视口flex-col：纵向排列flex-1：中间内容区域自动撑满剩余空间
3.3 第二层：模块基础组件
<!-- pages/study.vue -->
<template>
<div class="flex flex-col flex-1">
<!-- 头部 Swiper / Tabs -->
<RouterView />
</div>
</template>
vue
flex-1 继承上一层的剩余空间，继续向下传递。
3.4 第三层：购物车页面
<!-- pages/study/cart.vue -->
<template>
<div class="flex-1 relative bg-gray-100">
<!-- 列表区域 -->
<div class="pb-20">
<ul>
<!-- 购物车条目 -->
</ul>
</div>
<!-- 底部结算栏 -->
<div class="absolute bottom-0 left-0 w-full bg-white">
<!-- ... -->
</div>
</div>
</template>
vue
flex-1 使购物车页面填充上一层的所有可用空间。
3.5 布局层级图
┌─────────────────────────────────┐
│ min-h-screen + flex-col │ ← default.vue
│ ┌─────────────────────────────┐ │
│ │ NavBar │ │
│ ├─────────────────────────────┤ │
│ │ flex-1 │ │
│ │ ┌─────────────────────────┐ │ │ ← study.vue
│ │ │ flex-1 + flex-col │ │ │
│ │ │ ┌─────────────────────┐ │ │ │
│ │ │ │ Swiper / Tabs │ │ │ │
│ │ │ ├─────────────────────┤ │ │ │
│ │ │ │ flex-1 (cart.vue) │ │ │ │ ← cart.vue
│ │ │ │ │ │ │ │
│ │ │ │ [购物车列表] │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │─────────────────────│ │ │ │
│ │ │ │ absolute 底部结算栏 │ │ │ │
│ │ │ └─────────────────────┘ │ │ │
│ │ └─────────────────────────┘ │ │
│ └─────────────────────────────┘ │
│ Footer │
└─────────────────────────────────┘
text
4. 背景色与间距调整
4.1 背景色区分
<div class="relative bg-gray-100">
<!-- 列表条目：白色背景 -->
<div class="bg-white">...</div>
<!-- 底部结算栏：白色背景 -->
<div class="bg-white absolute ...">...</div>
</div>
vue
外层容器 bg-gray-100（灰色背景），列表条目和结算栏 bg-white（白色背景），形成视觉层次。
4.2 margin vs padding
当存在 absolute 子元素时，外层容器使用 padding 而非 margin：
margin不会被absolute子元素感知padding是容器内部空间的一部分，absolute元素相对于padding区域的边缘定位
5. 页面验证
完成布局后，依次验证以下页面确保无副作用：
| 页面 | 路由 | 验证项 |
|---|---|---|
| 学习列表 | /study | 列表正常展示，无布局偏移 |
| 购物车 | /study/cart | 列表 + 底部结算栏正常 |
| 课程详情 | /study/1 | 章节目录、学员评价正常 |
| 其他页面 | /about 等 | 无异常 |
小结
| 要点 | 技术 |
|---|---|
| 底部结算栏 | absolute bottom-0 + z-10 |
| 文档流补偿 | pb-20 为 absolute 元素预留空间 |
| 全屏高度 | 三层 flex-1 嵌套 |
| 最小视口高度 | min-h-screen（min-height: 100vh） |
| 背景色区分 | 外层灰色 + 内层白色 |
| margin vs padding | absolute 场景下使用 padding |
↑